/*
 * @Author: Yejing
 * @Date: 2023-06-10 10:31:18
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-10 10:31:18
 * @Description: desc
 */
<template>
	<view class="">
		<c-navigation-bar backIconColor='#fff' :navType='search.navType' :navThmen='search.navThmen' :naverSearchActive='search.naverSearchActive' :backIconColor="search.backIconColor" title="活动">
		</c-navigation-bar>
		<view  class="shop-list">
			<view v-for="item in shopList" :key="index">
				<view class="shop-item">
					<view class="shop-img">
							<u-image width="100%" height="325rpx" border-radius="32rpx" :src="item.image"></u-image>
					</view>
					<view class="proportion">50% off</view>
					<view class="thing">
						On everythin
					</view>
					<view class="code">
						With code: rikafashi
					</view>
					<view class="get-button-group">
						<u-button :custom-style="getButton">Get Now</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import lineProductCard from "@/pages/searchInfo/components/productCard.vue"
	export default {
		components: {
			lineProductCard
		},
		data() {
			return {
				//搜索
				search: {
					navThmen: 'line',
					navType: 'navBackTitle',
					naverSearchActive:"#ffffff",
					backIconColor:"#1B1D29"
				},
				//按钮自定义样式
				getButton:{
					padding: '10rpx 28rpx',
					background: '#1B1D29',
					borderRadius: '25rpx',
					color: '#fff',
					fontSize:'20rpx',
					height:'50rpx',
					lineHeight:'50rpx',
					width:'142rpx'
				},
				shopList: [{
					name: 'Roller Rabbit',
					info: 'vadio Olderf ddfdsf',
					money: '198',
					image: require('@/static/images/activite.png')
				},
				{
					name: 'Roller Rabbit',
					info: 'vadio Olderf ddfdsf',
					money: '198',
					image: require('@/static/images/activite.png')
				}],
			}
		},
		methods: {
			
		}
	}
</script>
<style lang="scss" scoped>
	.shop-list {
		padding: 172rpx 40rpx 0 40rpx;
		.shop-item {
			width: 100vm;
			height: 326rpx;
			border-radius: 32rpx;
			position: relative;
			color: #000000;
			margin-bottom: 30rpx;
		}
		.shop-img {
			    width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		.proportion{
			font-size: 50rpx;
		}
		.thing {
			font-size: 32rpx;
		}
		.code{
			color: #91909A;
			font-size: 22rpx;
		}
		.get-button-group {
			position: absolute;
			left:30rpx;
			bottom: 36rpx;
		}
	}
</style>